import React,{Component,Fragment} from "react";
import { Input, Icon, List } from 'antd';
import TodoItem from "./TodoItem";

class TodoList extends Component {

    constructor(prop){
        super(prop)
        this.state = {
            list : [
                "learn english",
                "learn react"
            ],
            inputValue : ""
        }
        this.handleInputChange = this.handleInputChange.bind(this)
        this.handleBtnClick = this.handleBtnClick.bind(this)
        this.handleItemClick = this.handleItemClick.bind(this)
    }
    handleInputChange(e){
        //console.log(e.target.value);
        this.setState({
            inputValue : e.target.value
        })
    }
    handleBtnClick(){
        this.setState({
            list : [...this.state.list, this.state.inputValue ],
            inputValue : ""
        });
    }
    handleItemClick(index){
        const list = [...this.state.list];
        list.splice(index, 1);
        this.setState({list});
    }
    getItemColor(){
        const { index } = this.props;
        const itemColor = ["#F0EBB0","#c1f2c5"];
        return itemColor[index%2];
    }

    //父组件通过属性的形式向子组件传递参数
    //子组件通过this.props获取父组件传递过来的参数
    render(){
        return(
            <Fragment>
                <div className = "add-task">
                    <Input
                        size="large"
                        onChange={this.handleInputChange}
                       placeholder="e.g. 今天晚上记得去买菜"
                       onPressEnter={this.handleBtnClick}
                       value={this.state.inputValue}
                       addonAfter={<Icon type="enter"
                                         onClick={this.handleBtnClick}/>} />
                </div>
                <List
                    bordered
                    dataSource={this.state.list}
                    renderItem={(value, index) => (<List.Item><TodoItem
                        delete={this.handleItemClick}
                        key={index}
                        index={index}
                        content={value}
                    /></List.Item>)}
                />

            </Fragment>
        )
    }
}

export default TodoList;
